<template>
  <div style="display: grid; grid-template-columns: 20rem 1fr; height:100vh;">

   <div class="left">
    <el-button  style="margin: 1em auto; display: block;" @click="store.loadUser();">更新用户信息</el-button>
    <ol>
      <li><router-link to="/demo/">如何人都能普通页面</router-link></li>
      <li><router-link to="/demo/page2">登录后才能进入的页面</router-link></li>
      <li><router-link to="/demo/page3">管理员和vip才能进入</router-link></li>
      <li><router-link to="/demo/page4">元素级的控制</router-link></li>
      <li><router-link to="/demo/upload">文件上传</router-link></li>
    </ol>
    <el-button  style="margin: 1em auto; display: block;" @click="store.logout();">退出</el-button>
   </div>

    <div style="height: 100vh;">
      <el-scrollbar style="padding:2em;">
        <Transition name="fade" mode="out-in">
          <router-view></router-view>
        </Transition>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import {userStore} from "@/store/user";
const store = userStore();
</script>

<style scoped>
.left {
  background-color: rgba(0,0,0,.7);
  font-size: 1.2rem;
  color: #FFF;
  line-height: 2;
}
.left a {
  display: inline-block;
  color:inherit;
  text-decoration: none;
  transition: all .5s;
}
.left a:hover {
  transform: translate(1px,1px);
}
</style>